// import React from 'react';
import React, { Suspense, lazy } from 'react';
import { TransitionGroup, CSSTransition } from "react-transition-group";


// import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { HashRouter as Router, Route, Switch, Redirect, withRouter } from 'react-router-dom';

const CreateView = lazy(() => import('@pages/meeting/CreateView'));
const MyListView = lazy(() => import('@pages/meeting/MyListView'));


const MeetingHeader = lazy(() => import('@src/components/MeetingHeader'));

const MeetingNav = lazy(() => import('@src/components/MeetingNav'));

const AuthRoute = lazy(() => import('./AuthRoute.jsx'));

//loginMask 选直接到index.html写一下样式哈

const MeetingRouter = () => (
    <Router>

        <Suspense fallback={<div className="loginMask">正在拼命加载...</div>}>

            <MeetingHeader />

            <MeetingNav className="w_page_center mt_10 " />

            <TransitionGroup>
                <CSSTransition key={location.key} classNames="fade" timeout={300} >
                    <Switch location={location}>
                        <AuthRoute path="/Create" component={CreateView} />
                        <AuthRoute path="/MyList" component={MyListView} />
                        <Redirect from="/" to="/Create" />
                        <Route render={() => <div>Not Found</div>} />
                    </Switch>
                </CSSTransition>
            </TransitionGroup>

        </Suspense >
    </Router >
);

export default MeetingRouter;